<script setup>
import { ref } from 'vue'
import { getUserlogin } from '@/api/step'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()
const username = ref('')
const password = ref('')

function onSubmit() {
    getUserlogin({
        loginname: username.value,
        password: password.value
    }).then(res => {
        console.log(res.data);
        if (res.data.code === '200') {
            showSuccessToast('登录成功');
            window.localStorage.setItem('userstate','true')
            router.push('../')
        } else {
            showFailToast('账号或密码不正确')
        }
    })
}

function onClickLeft() {
    router.push('../my')
}

function zhuce() {
    router.push('../register/step1')
}
</script>

<template>
    <div class="box_big">
        <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="box_middle">
            <div class="box_small">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit" class="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
            <van-button round block type="success" native-type="submit" @click="zhuce" class="zhuce">
                注册
            </van-button>
        </div>
    </div>
</template>

<style lang="scss">
.box_big {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
    position: relative;

    .box_middle {
        height: 400px;
        width: 80%;
        background-color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 10px 10px 20px hotpink;
        .box_small{
            position: absolute;
            top: 50px;
            .submit{
            width: 250px;
            left: 25px;
        }
        }
        
    }
    .zhuce{
        position: absolute;
        top: 220px;
        width: 250px;
        left: 40px;
    }
}
</style>